<!doctype html>
<html>
<head>
    <meta charset="utf-8"/>
    <meta name="viewport"
          content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="apple-touch-fullscreen" content="yes">
    <title>简单拖放 demo</title>
    <style>
        .component {
            margin: 50px 10px;
            width: 120px;
            height: 100px;
            border: 1px solid black;
            float: left;
            display: inline;
            overflow: hidden;
            -ms-touch-action:none
            -ms-user-select:none;
        }

        #drop {
            border: 1px solid green;
            height: 130px;
        }

        .ks-dd-drag-over {
            background: #a52a2a;
        }

        .ks-dd-drop-over {
            background: #ffff00;
        }

        .ks-dd-proxy {
            position: absolute;
            left:-9999px;
            top:-9999px;
        }
    </style>
    <link rel="stylesheet" href="../../css/assets/dpl/base.css"/>
</head>
<body>


<div id="container" class="container">

    <h2>简单拖放 + 回复动画</h2>

    <label>
        <input id='disabled' type="checkbox"/>
        disabled droppable</label>

    <div class="ks-clear">
        <div id="c1" class="component">

            intersect drag
        </div>

        <div id="c2" class="component">

            point drag
        </div>

        <div id="c3" class="component">
            strict drag with proxy
            <img height="100"
                 src="http://img.alimama.cn/adbrand/adboard/picture/2011-09-20/126792650001110920134440.jpg"/>
        </div>
    </div>
    <div id="drop">
        <strong>drop zone</strong>
    </div>

</div>

<script src="/kissy/build/seed.js"></script>
<script src="/kissy/src/package.js"></script>
<script>

    var S = KISSY;

    KISSY.use("node,dd,dd/plugin/proxy", function (S, Node, DD, Proxy) {
        var DDM = DD.DDM,
                $ = Node.all,
                DraggableDelegate = DD.DraggableDelegate,
                Draggable = DD.Draggable,
                Droppable = DD.Droppable;

        /**
         * 简单拖放
         */
        S.ready(function (S) {
            var p = new Proxy({
                /**
                 * 如何产生替代节点
                 * @param drag 当前拖对象
                 */
                node: function (drag) {
                    var n = $(drag.get("dragNode").clone(true));
                    n.attr('id', S.guid("ks-dd-proxy"));
                    n.css("opacity", 0.2);
                    n.isProxy = 1;
                    return n;
                },
                moveOnEnd: 0
            });
            var c1 = new Draggable({
                node: "#c1",
                move: 1,
                //模式，
                // intersect :区域相交就算enter
                // strict : drag 区域完全在 drop 区域内才算
                // point : 鼠标在 drop 区域内
                //默认 point
                mode: Draggable.DropMode.INTERSECT
            });


            var c3 = new Draggable({
                node: "#c3",
                move: 1,
                mode: Draggable.DropMode.STRICT
            });

            c3.plug(p);

            var c2 = new Draggable({
                node: "#c2",
                move: 1
            });

            var drop = new Droppable({
                node: "#drop"
            });

            $('#disabled').on('click', function () {
                drop.set('disabled',this.checked);
            });

            c1.on("dragenter", function (ev) {

                S.log(ev.drag.get("node").attr('id') + " dragenter "
                        + ev.drop.get("node").attr('id'));
            });

            c1.on("dragover", function (ev) {
                S.log(ev.drag.get("node").attr('id') + " dragover "
                        + ev.drop.get("node").attr('id'));
            });

            c1.on("dragexit", function (ev) {
                S.log(ev.drag.get("node").attr('id') + " dragexit "
                        + ev.drop.get("node").attr('id'));
            });

            function onhit(ev) {
                var node = ev.drag.get("dragNode");
                node.css({
                    position: "",
                    left: "",
                    top: ""
                });
                node.css("margin", "5px 10px");
                node.appendTo(ev.drop.get("node"));
                ev.drag.destroy();
            }


            DDM.on("dragdropmiss", function (ev) {
                var node = ev.drag.get("node");
                S.log(node.attr('id') + " dragdropmiss ");
                if (node.isProxy) {
                    var dragNode = ev.drag.get("dragNode");
                    node = node.clone(true).insertBefore(node);
                    var props = {
                        left: dragNode.offset().left - parseInt(dragNode.css('margin-left')),
                        top: dragNode.offset().top - parseInt(dragNode.css('margin-top'))
                    };
                    node.animate({
                        to: props,
                        duration: 0.5,
                        complete: function () {
                            node.remove();
                        }
                    })
                } else {
                    node.animate({
                        to: {
                            left: 0,
                            top: 0
                        },
                        duration: 0.5,
                        complete: function () {
                            node.css({
                                position: "",
                                left: "",
                                top: ""
                            });
                        }
                    })
                }

            });


            drop.on("dropenter", function (ev) {
                S.log(ev.drag.get("node").attr('id') + " dropenter "
                        + ev.drop.get("node").attr('id'));
            });

            drop.on("dropover", function (ev) {
                S.log(ev.drag.get("node").attr('id') + " dropover "
                        + ev.drop.get("node").attr('id'));
            });

            drop.on("dropexit", function (ev) {
                S.log(ev.drag.get("node").attr('id') + " dropexit "
                        + ev.drop.get("node").attr('id'));
            });

            drop.on("drophit", onhit);
        });
    });


</script>
</body>
</html>